<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		/* 定位盒子的经典应用:大相小绝 */
		*{
			
			margin: 0;
			padding: 0;
			
		}
		.box{
			width:400px ;
			height:400px;
			background-color: aqua;
			/* 相对定位 */
			position: relative;
			/* left: 200px; */
			/* bottom: 200px; */
			right: 200px;
			top: 200px;
		}
		.hbox{
			width:300px ;
			height:300px;
			background-color: pink;
			/* 绝对定位 */ /* 绝对定位元素移动时的参照点是祖先元素的位置
						如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位
						如果祖先元素有定位(相对/绝对/固定),则以最近一级有定位元素作为参照点 */
			position: absolute;
			/* left: 200px; */
			/* bottom: 200px; */
			right: 500px;
			top: 0px;
			
		}
		.fixbox{
			width: 200px;
			height: 300px;
			border: 1px solid red ;
			/* fixed:固定定位 */
			position:fixed;
			left: 10px;
		}
	</style>
	<body>
		<div class="box"></div>
		<div class="hbox"></div>
		<div class="fixbox">点击售后</div>
		
	</body>
</html>
